<template>
  <div class="xpIndex">
   <router-view/>
    <div class="tabbar border-top">
      <router-link :to="item.to" v-for="item in tabItemData" :key="item.id">
        <img :src=" $route.path === item.to ?item.imgSrcSelect:item.imgSrc" alt="">
       <span :class="{active: $route.path === item.to}"> {{item.text}}</span>
      </router-link>
    </div>
  </div>
</template>

<script>
import find from '../icons/find_icon_Tabbar.png'
import findSelect from '../icons/find_icon_Tabbar_active.png'
import classify from '../icons/classify_icon.png'
import classifySelect from '../icons/classify_icon_active.png'
import hall from '../icons/logo.png'
import hallSelect from '../icons/logo_active.png'
import story from '../icons/story_icon_Tabbar.png'
import storySelect from '../icons/story_icon_Tabbar_active.png'
import personCenter from '../icons/person_icon_Tabbar.png'
import personCenterSelect from '../icons/person_icon_Tabbar_active.png'

export default {
  name: 'Index',
  data () {
    return {
      tabItemData: [
        {
          id: 'tabbar1',
          to: '/find',
          imgSrc: find,
          imgSrcSelect: findSelect,
          text: '发现',
          selected: true
        },
        {
          id: 'tabbar2',
          to: '/classify',
          imgSrc: classify,
          imgSrcSelect: classifySelect,
          text: '分类',
          selected: false
        },
        {
          id: 'tabbar3',
          to: '/hall',
          imgSrc: hall,
          imgSrcSelect: hallSelect,
          text: '',
          selected: false
        },
        {
          id: 'tabbar4',
          to: '/story',
          imgSrc: story,
          imgSrcSelect: storySelect,
          text: '故事',
          selected: false
        },
        {
          id: 'tabbar5',
          to: '/personCenter',
          imgSrc: personCenter,
          imgSrcSelect: personCenterSelect,
          text: '我',
          selected: false
        }
      ]
    }
  }
}
</script>
<style lang="stylus" scoped>
.xpIndex
  height 100%
  // @supports (bottom: env(safe-area-inset-bottom))
  //   .tabbar
  //     padding-bottom env(safe-area-inset-bottom)
  .tabbar
    position fixed
    bottom 0
    z-index 9999997
    background-color #fff
    height 148px
    line-height 148px
    display flex
    width 100%
    justify-content space-around
    padding-top 16px
    a
      display inline-block
      width 160px
      text-align center
    img
      width 82px
      height 82px
      display block
      margin 0 auto
    span
      display block
      text-align center
      font-size 30px
      color #CCCCCC
      height 56px
      line-height 56px
      &.active
        color #BA825A
    a:nth-child(3)
      img
        width 111px
        height 126px
</style>
